\label{userGuideWeb}
This document explains how to use the application \emph{Find Friend Location} for Web site. If you want to know how to install 
the application you can go to the \emph{Section \ref{webInstallationGuide}}.


\subsection{Common user guide}
\label{commonUserGuideWeb}

\subsubsection{Login and create new account}
The login and create new account page is the first application's interface. Here you have 
two options to: 
\begin{enumerate}
 \item Login: By filling the fields on the up right corner of the page and pressing the \emph{Login} button. See \emph{(Figure 
       \ref{loginUserGuideWeb})}.
 \item Create new account : By filling the form on the center of the page and pressing the \emph{Sign up} button. Be careful, 
the nickname and password have to be filled and they have to be more than 2 and 3 characters, respectively. See \emph{(Figure 
       \ref{createAccountUserGuideWeb})} where the user tries to create a new account with an existing nick.
\end{enumerate}

\begin{figure}[ht]
\centering
\includegraphics[width=1\textwidth ]{Guides/images/loginUserpageWeb.png} 
\caption{Login and create new account}
\label{loginUserGuideWeb}
\end{figure}

\begin{figure}[ht]
\centering
\includegraphics[width=1\textwidth ]{Guides/images/createNewExistingAccountWeb.png} 
\caption{Login and create new account}
\label{createAccountUserGuideWeb}
\end{figure}


\subsubsection{Home page}
This is the home page of the application \emph{(Figure \ref{HomeUserGuideWeb})} where you will be redirected after login or 
creation of your new account. The left side, which will remain the same for all pages, has links which navigate you through the Web 
site. In the right part of the page you can see the history and information about the Find Friend Location application. 

\begin{figure}[ht]
\centering
\includegraphics[width=1\textwidth ]{Guides/images/homeUserPageWeb.png} 
\caption{Common user's home page}
\label{HomeUserGuideWeb}
\end{figure}
 

\subsubsection{Friends last position}
If you want to see the last location of all your friends displayed in a map, then you have to press the link \emph{Friends 
Last Position} in the left side of the page. The page which is going to be displayed after this action is shown in \emph{(Figure 
\ref{friendLastPositionGuideWeb})}.

\begin{figure}[ht]
\centering
\includegraphics[width=1\textwidth ]{Guides/images/friendPositionWeb.png} 
\caption{Friends last position page}
\label{friendLastPositionGuideWeb}
\end{figure}


\subsubsection{Show all friends}
This interface give you the ability to see all the friends you have in the application, shown in a table, then you have to press 
the link \emph{Show All Friends} in the left side of the page. The page which is going to be displayed after this action is shown 
in \emph{(Figure \ref{showAllFriendsGuideWeb})}.

\begin{figure}[ht]
\centering
\includegraphics[width=1\textwidth ]{Guides/images/AllFriendsWeb.png} 
\caption{Show all friends page}
\label{showAllFriendsGuideWeb}
\end{figure}

In this page you are able to make two actions: 
\begin{enumerate}
 \item See selected friend's account information, by pressing the \emph{Info} button in \emph{(Figure 
	\ref{showAllFriendsGuideWeb})}. 
 \item See selected friend's history of previous positions, displayed in a map, by pressing the \emph{History} button in 
        \emph{(Figure \ref{showAllFriendsGuideWeb})}. 
\end{enumerate}

The page that you will see if you press the \emph{Info} button, is shown in \emph{(Figure \ref{showFriendAccountGuideWeb}}.
If you press the \emph{History} button, you will see a page like in \emph{(Figure \ref{friendLastPositionGuideWeb}}, with 
the difference that the map markers will show a specific number of previous positions of the selected friend. 

\begin{figure}[ht]
\centering
\includegraphics[width=1\textwidth ]{Guides/images/showFriendAccountWeb.png} 
\caption{Show selected friend's account}
\label{showFriendAccountGuideWeb}
\end{figure}


\subsubsection{Show change account}
This interface give you the ability to see your account information or you want to change some of your account information, then 
you have to press the link \emph{Show Change Account} in the left side of the page. The page which is going to be displayed after 
this action is shown in \emph{(Figure \ref{showMyUserAccountGuideWeb})}. If you want to go back without submitting the changes you 
may have done then you can press the button \emph{Back} or press any link on the left side of the page. Remember that if you want 
to change the password, it has to be more than three characters.

\begin{figure}[ht]
\centering
\includegraphics[width=1\textwidth ]{Guides/images/showMyCommonAccountWeb.png}
\caption{Show all friends page}
\label{showMyUserAccountGuideWeb}
\end{figure}


\subsubsection{Logout}
If you want to logout from the Web site the you have to press the \emph{logout} button in the left side of the page. After this 
action you are going to be redirected to the login page.


\subsubsection{System messages}
The system will inform you with alert messages after some actions you make. They are not only error messages, but also they are 
confirm or submit messages. These messages are going to be shown after these actions:
\begin{enumerate}
 \item Try to login with invalid nick or password.
 \item Try to create a new account.
 \item Try to change your account information. 
\end{enumerate}



\subsection{Administrator guide}
\label{administratorrGuideWeb}


\subsubsection{Login and create new account}
The login and create new account page is the first application's interface \emph{(Figure \ref{loginAdminGuideWeb})}. Here as you 
are already an administrator the only action you do is to login to the system by pressing the \emph{Login} button in the up right 
corner of the page. You will be able to create a new account by filling the form in the middle of the page, but the new account 
that is going to be created it will be for a common user and not for an administrator.

\begin{figure}[ht]
\centering
\includegraphics[width=1\textwidth ]{Guides/images/loginAdminpageWeb.png} 
\caption{Login and create new account}
\label{loginAdminGuideWeb}
\end{figure}


\subsubsection{Home page}
This is the home page of the application \emph{(Figure \ref{HomeAdminGuideWeb})} where you will be redirected after the login.  
The left side, which will remain the same for all pages, has links which navigate you through the Web site. In the right part 
of the page you can see the history and information about the Find Friend Location application. 

\begin{figure}[ht]
\centering
\includegraphics[width=1\textwidth ]{Guides/images/homeAdminPageWeb.png} 
\caption{Common user's home page}
\label{HomeAdminGuideWeb}
\end{figure}
 

\subsubsection{Users last position}
If you want to see the last location of all the users of the displayed in a map, then you have to press the link \emph{Users 
Last Position} in the left side of the page. The page which is going to be displayed after this action is shown in \emph{(Figure 
\ref{userLastPositionGuideWeb})}.

\begin{figure}[ht]
\centering
\includegraphics[width=1\textwidth ]{Guides/images/usersLastPositionWeb.png} 
\caption{Friends last position page}
\label{userLastPositionGuideWeb}
\end{figure}



\subsubsection{Show all users}
This interface give you the ability to see all the users that use the application, shown in a table, then you have to press 
the link \emph{Show All Users} in the left side of the page. The page which is going to be displayed after this action is 
shown in \emph{(Figure \ref{showAllUsersGuideWeb})}.

\begin{figure}[ht]
\centering
\includegraphics[width=1\textwidth ]{Guides/images/showAllUsersTableWeb.png} 
\caption{Show all friends page}
\label{showAllUsersGuideWeb}
\end{figure}

In this page you are able to make three actions: 
\begin{enumerate}
 \item See selected user's account information, by pressing the \emph{Info} button in \emph{(Figure 
	\ref{showAllUsersGuideWeb})}. 
 \item See selected user's history of previous positions, displayed in a map, by pressing the \emph{History} button in 
        \emph{(Figure \ref{showAllUsersGuideWeb})}. 
 \item Delete the selected user by pressing the \emph{Delete} button in \emph{(Figure \ref{showAllUsersGuideWeb})}. 
\end{enumerate}

Be careful in 
this table you will see that some \emph{Delete} and \emph{History} buttons cannot be pressed, this means that these users
are administrators and you cannot delete and see their history of previous positions, respectively. 

The page that you will see if you press the \emph{Info} button, is shown in \emph{(Figure \ref{showSelUserAccountGuideWeb}}.
If you press the \emph{History} button, you will see a page like in \emph{(Figure \ref{userLastPositionGuideWeb}}, with 
the difference that the map markers will show a specific number of previous positions of the selected user.

\begin{figure}[ht]
\centering
\includegraphics[width=1\textwidth ]{Guides/images/showUserAccountWeb.png} 
\caption{Show selected friend's account}
\label{showSelUserAccountGuideWeb}
\end{figure}

\subsubsection{Search user}
If you want to search a user that uses the application, then you have to press the link \emph{Search User} in the left side of 
the page. The page which is going to be displayed after this action is shown in \emph{(Figure \ref{searchUserGuideWeb})}.

\begin{figure}[ht]
\centering
\includegraphics[width=1\textwidth ]{Guides/images/searchUsersWeb.png} 
\caption{Show all friends page}
\label{searchUserGuideWeb}
\end{figure}

In this page, which has a form, you are able to search the user by nick, name, surname and/or country. In this picture, the user 
is going to search for a user with Nick \emph{example} and to be from country \emph{Denmark}. After filling the fields 
that you want to search, you have to press the \emph{Submit Search} button. After this action will be displayed the \emph{(Figure 
\ref{searchUserTableGuideWeb}}.

\begin{figure}[ht]
\centering
\includegraphics[width=1\textwidth ]{Guides/images/searchUsersTableWeb.png} 
\caption{Show all friends page}
\label{searchUserTableGuideWeb}
\end{figure}

This page is common with the \emph{Show All Users}, with the difference that you are able to make only two actions: 
\begin{enumerate}
 \item See selected user's account information, by pressing the \emph{Info} button in \emph{(Figure 
	\ref{searchUserTableGuideWeb})}. 
 \item See selected user's history of previous positions, displayed in a map, by pressing the \emph{History} button in 
        \emph{(Figure \ref{searchUserTableGuideWeb})}.
\end{enumerate}

The page that you will see if you press the \emph{Info} button, is the same as the page in \emph{(Figure 
\ref{showSelUserAccountGuideWeb}}.
If you press the \emph{History} button, you will see a page like in \emph{(Figure \ref{userLastPositionGuideWeb}}, with 
the difference that the map markers will show a specific number of previous positions of the selected user. 


\subsubsection{Show change account}
This interface give you the ability to see your account information or you want to change some of your account information, 
then you have to press the link \emph{Show Change Account} in the left side of the page. The page which is going to be 
displayed after this action is shown in \emph{(Figure \ref{showMyAdminAccountGuideWeb})}. If you want to go back without submitting 
the changes you may have done, then you can press the button \emph{Back} or press any link on the left side of the page. Remember 
that if you want to change the password, it has to be more than three characters.

\begin{figure}[ht]
\centering
\includegraphics[width=1\textwidth ]{Guides/images/showAdminAccountWeb.png} 
\caption{Show all friends page}
\label{showMyAdminAccountGuideWeb}
\end{figure}


\subsubsection{Create new admin}
If you want to create a new administrator account, then you have to press the link \emph{Create new Admin} in the left side of 
the page. The page which is going to be displayed after this action is shown in \emph{(Figure \ref{createAdminAccountGuideWeb})}. 
In this page you can fill the new administrators account information and then if you press the \emph{Create admin} button, the 
new administrator account will be created. In the example, a new administrator account is being inserted with his information. 
The nick \emph{newadmin} does not already exists in the system, that's why the colour is green. 

\begin{figure}[ht]
\centering
\includegraphics[width=1\textwidth ]{Guides/images/createAdminWeb.png} 
\caption{Show all friends page}
\label{createAdminAccountGuideWeb}
\end{figure}


\subsubsection{Logout}
If you want to logout from the Web site the you have to press the \emph{logout} button in the left side of the page. After this 
action you are going to be redirected to the login page.


\subsubsection{System messages}
The system will inform you with alert messages after some actions you make. They are not only error messages, but also they are 
confirm or submit messages. These messages are going to be shown after these actions:
\begin{enumerate}
 \item Try to login with invalid nick or password.
 \item Try to create a new account for common user in the login page.
 \item Try to change your account information. 
 \item Try to delete a user who uses the system.
 \item Try to create a new administrator account.
\end{enumerate}